<template>
	<ul id="l_blog" v-loading="tableDataLoading" style="min-height: 300px;">
 
    <li v-for="(v,i) in blogListShow" :key="i">
        <router-link :to="'/'+v.id" target="_blank">
          <h3>{{v.title}}</h3>
        </router-link>

        <p class="colDefualt">
          创建时间：<span class="colInfo">{{v.newDate}}</span>
          最后修改时间：<span class="colInfo">{{v.endDate}}</span>
          -阅读：<span class="colInfo">{{v.browse}}</span>
          -评论：<span class="colInfo">{{v.commentNum}}</span>
        </p>
        <router-link :to="'/'+v.id" target="_blank">
          <mavon-editor :ishljs="true" v-model="v.content" :toolbarsFlag="false" :editable="false"></mavon-editor>
        </router-link>
        
        <!-- <mavon-editor :ishljs="true" v-model="blogList.content" :toolbarsFlag="false" :editable="false"></mavon-editor> -->
        
        <!-- <p class="content textEllipsis3">{{v.content}}</p> -->
    </li>
    <li v-if="blogListHide">
      <h3>暂无数据</h3>
    </li>
    <el-pagination
      v-if="paginationShow"
      @current-change="handleCurrentChange"
      :page-size="5"
      layout="prev, pager, next, jumper"
      :total="blogList.length" 
      background
      style="text-align: center">
    </el-pagination>
	</ul>
</template>

<script>
// import { mavonEditor } from "mavon-editor";
import { mavonEditor } from "mavon-editor";

export default {
  metaInfo() {
    return {
      title: this.title,
      meta: [
        {
          name: "keyWords",
          content: "vue，api，nodejs，node，web，html，blog，博客，俊军，刘俊军"
        },
        {
          name: "keyWords",
          content: this.metaKeyWords
        }
      ]
    };
  },
  data() {
    return {
      title:
        "俊军 - " +
        this.$route.path.split("/")[this.$route.path.split("/").length - 1],
      metaKeyWords: "俊军" + this.$route.path.split("/").join("，"),
      tableDataLoading: true,
      blogList: [],
      blogListShow: [],
      blogListHide: false,
      paginationShow: false
    };
  },
  created() {
    // console.log(this.$store);
  },
  mounted() {
    this.switchingUrl();
    // this.getCategory("api/getBlog_list", this.$route.params);
  },
  components: {
    mavonEditor
  },
  computed: {
    // compiledMarkdown: function() {
    //   console.log(this.blogListShow);
    //   return marked(this.blogListShow.content, { sanitize: true });
    // }
  },
  methods: {
    switchingUrl() {
      if (this.$route.query.search) {
        this.getCategory("api/searchBlog_list", this.$route.query);
        this.title = "俊军 - " + this.$route.query.search;
      } else {
        this.getCategory("api/getBlog_list", this.$route.params);
        this.title = "俊军 - " + this.$route.params.type;
      }
    },
    handleCurrentChange: function(val) {
      var num = 5 * val;
      this.blogListShow = this.blogList.slice(num - 5, num);
    },

    getCategory: async function(url, data) {
      let _this = this;
      if (!data.type) {
        data.type = "home";
      }
      let response = await _this.http.get(url, data, _this);
      // console.log(response);
      _this.saverFn.httpSuccess(
        _this,
        response,
        null,
        () => {
          _this.blogList = response.data.data;
          _this.blogList.forEach((v, i) => {
            _this.blogList[i].commentNum = v.comment
              ? JSON.parse(v.comment).length
              : "0";
          });
          if (!_this.blogList.length) {
            _this.blogListHide = true;
            _this.blogListShow = [];
            _this.paginationShow = false;
          } else {
            _this.blogListHide = false;
            _this.blogListShow = _this.blogList.slice(0, 5);
            if (_this.blogList.length > 5) {
              _this.paginationShow = true;
            } else {
              _this.paginationShow = false;
            }
          }
        },
        true
      );
      _this.tableDataLoading = false;
    }
  },
  watch: {
    $route(to, from) {
      this.switchingUrl();
      // this.metaKeyWords = "俊军" + meatStr[meatStr.length-1];
    }
  }
};
</script>
<style lang="less" scoped>
@import "../public/pubilcColor.less";
.markdown-body {
}
#l_blog {
  > li {
    padding: 20px 20px;
    background: @bgcolor;
    margin-bottom: 30px;
    border-bottom: 2px solid rgba(221, 221, 221, 1);
    h3 {
      margin-top: 20px;
      margin-bottom: 10px;
      font-size: 24px;
      font-weight: 800;
      color: #333;
    }
    p {
      margin: 0 0 10px;
      color: #666;
    }
    .colInfo {
      color: @blue;
    }
  }
}
</style>

<style lang="less">
#l_blog .markdown-body {
  max-height: 300px;
}
#l_blog .v-note-wrapper .v-note-panel .v-note-show {
  width: 100%;
  flex: 1;
}
#l_blog .v-note-wrapper .v-note-panel .v-note-edit.divarea-wrapper {
  display: none;
}
</style>
